<%@page import="java.util.Date"%>
<%@ include file="/taglibs.jsp"%>

<fmt:message key="date.format" var="df" scope="page"/>
<head>
	<script type="text/javascript" src="scripts/jquery.accordion.2.0.js" charset="utf-8"></script>
	<link rel="stylesheet" href="styles/accordion.core.css" type="text/css" charset="utf-8">
	<link rel="stylesheet" type="text/css" href="${ctx}/styles/styles_tab.css" />
	<link href="styles/jquery.dialog.css" rel="stylesheet" type="text/css" />
	<script src="scripts/jquery.dialog.js" type="text/javascript"></script>
	<script src="scripts/jquery.scrollTo-1.4.2-min.js"></script>
	<script src="scripts/jquery.localscroll-1.2.7-min.js"></script>
	<script type="text/javascript">highlightTableRows("fileList");</script>
	<meta http-equiv="refresh" content="30" >
</head>
<style type="text/css">
	
	/* CSS for the small boxes that will scroll inside a div */
	
	#small-box-container {
		border: 1px solid black;
		padding: 5px;
		height: 150px;
		overflow: auto;
	}
</style>

<script type="text/javascript">
            $(document).ready(function() {
            	
            	// Scroll the content inside the #scroll-container div
    			$('#small-box-links').localScroll({
    			   target:'#small-box-container'
    			});

            	
        		//Default Action
        		var selectedTab = getUrlVars()["tab"];
        		$(".tab_content").hide(); //Hide all content
        		if(selectedTab == 1){
        			$("ul.tabs li:first").addClass("active").show(); //Activate first tab
    	    		$(".tab_content:first").show(); //Show first tab content
        		}else if(selectedTab == 2){
	        		$("ul.tabs li:last").addClass("active").show(); //Activate first tab
    	    		$(".tab_content:last").show(); //Show first tab content
        		}
        		
        		//On Click Event
        		$("ul.tabs li").click(function() {
        			$.blockUI({ message: '<img src="${ctx}/images/busy.gif" />...' });
        			$("ul.tabs li").removeClass("active"); //Remove any "active" class
        			$(this).addClass("active"); //Add "active" class to selected tab
        			$(".tab_content").hide(); //Hide all tab content
        			var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        			$(activeTab).fadeIn(); //Fade in the active content
        			//return false;
        		});
        		
        	
        	});
            
            function getUrlVars() {
                var vars = {};
                var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
                    vars[key] = value;
                });
                return vars;
            }
</script>

<!--  dialog display exchange messages   -->
<div id="overlay" class="web_dialog_overlay"></div>
<div id="dialog" class="web_dialog">
	<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
      <tr>
         <td class="web_dialog_title"><fmt:message key="tasklist.listExchange.dialog.title"/></td>
         <td class="web_dialog_title align_right">
            <a href="#" id="btnClose"><img src="${ctx}/images/close.png" height="20" width="20"></a>
         </td>
      </tr>
      <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
      </tr>
      <tr>
         <td colspan="2"><div id="small-box-container"><div id="output"></div><div style="color: red;font-weight:bold;" id="error"></div></div></td>
      </tr>
	</table>

	<s:form name="replyForm" action="sendReply" method="post">
	      <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
	      	<tr>
         		<td colspan="2"><b><fmt:message key="tasklist.listExchange.dialog.label.reply"/></b></td>
      		</tr>
		    <tr>
		         <td colspan="2"><textarea name="replyMessage" id="replyMessage" rows="3" cols="55"></textarea> </td>
		    </tr>
		    <tr>
		         <td colspan="2" style="text-align: center;">
		         	<input type="hidden" id="commentId" name="commentId">
		         	<button id="btnSubmit" type="button" class="button" onclick="sendReply()"> 
		         		<fmt:message key="tasklist.listExchange.dialog.button.send"/>
		         		<img src="${ctx}/images/msg_send.png" align="left" height="20" width="20"> 
		         	</button> 
		         	<button id="btnCancel" type="button" class="button"> 
		         		<fmt:message key="tasklist.listExchange.dialog.button.ok"/>
		         		<img src="${ctx}/images/btn_cancel.png" align="left" height="20" width="20"> 
		         	</button>
		         </td>
		      </tr>
		  </table>
	</s:form>
</div>

<!--  TAB CONTENT   -->
<ul class="tabs">
	<li id="tab1"><a href="${ctx}/tasks.html?tab=1"><s:property value="getText('tasklist.listform.title')"/></a></li>
	<li id="tab2"><a href="${ctx}/messages.html?tab=2"><s:property value="getText('tasklist.listExchange.title')"/></a></li>
</ul>
<div class="tab_container">
	<div id="tab1" class="tab_content">
		<table class="table">
							<tr style="background: #c2dfff">
								<td>
									<strong><s:text name="tasklist.listform.table.footer.closeExpiring"/>: <s:property value="totalFilesDeadline"/></strong>	
								</td>
								<td>
									<strong><s:text name="tasklist.listform.table.footer.expire"/>: <s:property value="totalFilesOvertime"/></strong>
								</td>
								<td>
									<strong>
										<a href="${ctx}/file/amendment.html">
											<c:if test="${totalRejectedFile != 0}">
						    					<img src="${ctx}/images/new.gif" align="left" height="20" width="20">
												<s:text name="tasklist.listform.statistics.rejectedfile"/>: <s:property value="totalRejectedFile"/>
						    				</c:if>
										</a>
									</strong>
								</td>
							</tr>
		</table>
						
		<s:form name="filterByType" action="filterTask" method="post">
		<s:select key="tasklist.filter.label" 
				list="#{'0':'T\u1EA5t c\u1EA3', '1':'H\u1ED3 s\u01A1 s\u1EAFp h\u1EBFt h\u1EA1n', '2':'H\u1ED3 s\u01A1 qu\u00E1 h\u1EA1n'}" 
				name="filterType" value="filterType"
				onchange="form.submit()"/>
		</s:form>
		<s:set name="files" value="fileList" scope="request"/>
		<s:set var="file_name" value="%{getText('file.item_name')}" scope="page"></s:set>
		<s:set var="files_name" value="%{getText('file.items_name')}" scope="page"></s:set>
		<display:table name="files" class="table" requestURI="" id="lstFile">
			<display:setProperty name="paging.banner.item_name" value="${file_name}"/>
			<display:setProperty name="paging.banner.items_name" value="${files_name}"/>
			<c:choose>
				<c:when test="${lstFile.remainingTime <= 1.0 && lstFile.remainingTime >= 0.5}">
			         
				    <display:column style="background: #FFFF99;width:300px" sortable="false" property="submitter" titleKey="statisticsFileByUser.form.table.header.submitter" escapeXml="true"/>
				    <display:column style="background: #FFFF99;" sortable="false" property="receivedDate" titleKey="statisticsFileByUser.form.table.header.receivedDate" escapeXml="true"/>
				    <display:column style="background: #FFFF99;width: 120px;" sortable="false" property="regulationTime" titleKey="statisticsFileByUser.form.table.header.regulationTime" escapeXml="true" />
				    <display:column style="background: #FFFF99;" sortable="false" titleKey="statisticsFileByUser.form.table.header.inprogress">
				    	<c:if test="${lstFile.new == false}">
				    		${lstFile.inprogress} <img src="${ctx}/images/new.gif" align="left" height="20" width="20">
				    	</c:if>
				    	<c:if test="${lstFile.new == true}">
				    		${lstFile.inprogress}
				    	</c:if>
				    </display:column>
				    <display:column style="width:30px;background: #FFFF99;" sortable="false" href="${ctx}/file/viewFile.html" media="html" paramId="id" paramProperty="id" titleKey="button.detail.title">
						        Xem
						    </display:column>
			  	</c:when>
				<c:when test="${lstFile.remainingTime <= 0.5}">
			        
					<display:column style="background: #fcbdbd;width:300px" sortable="false" property="submitter" titleKey="statisticsFileByUser.form.table.header.submitter" escapeXml="true"/>
				    <display:column style="background: #fcbdbd;" sortable="false" property="receivedDate" titleKey="statisticsFileByUser.form.table.header.receivedDate" escapeXml="true"/>
				    <display:column style="background: #fcbdbd; width: 120px;" sortable="false" property="regulationTime" titleKey="statisticsFileByUser.form.table.header.regulationTime" escapeXml="true" />
				    <display:column style="background: #fcbdbd;" sortable="false" titleKey="statisticsFileByUser.form.table.header.inprogress">
				    	<c:if test="${lstFile.new == false}">
				    		${lstFile.inprogress} <img src="${ctx}/images/new.gif" align="left" height="20" width="20">
				    	</c:if>
				    	<c:if test="${lstFile.new == true}">
				    		${lstFile.inprogress}
				    	</c:if>
				    </display:column>
				    <display:column style="width:30px;background: #fcbdbd;" sortable="false" href="${ctx}/file/viewFile.html" media="html" paramId="id" paramProperty="id" titleKey="button.detail.title">
						        Xem
						    </display:column>
			  	</c:when>
			  	<c:otherwise>
			        
					<display:column style="background: #d2f5b0; width:300px" sortable="false" property="submitter" titleKey="statisticsFileByUser.form.table.header.submitter" escapeXml="true"/>
				    <display:column style="background: #d2f5b0;" sortable="false" property="receivedDate" titleKey="statisticsFileByUser.form.table.header.receivedDate" escapeXml="true"/>
				    <display:column style="background: #d2f5b0;width: 120px;" sortable="false" property="regulationTime" titleKey="statisticsFileByUser.form.table.header.regulationTime" escapeXml="true" ></display:column>
				    <display:column style="background: #d2f5b0;" sortable="false" titleKey="statisticsFileByUser.form.table.header.inprogress">
				    	<c:if test="${lstFile.new == false}">
				    		${lstFile.inprogress} <img src="${ctx}/images/new.gif" align="left" height="20" width="20">
				    	</c:if>
				    	<c:if test="${lstFile.new == true}">
				    		${lstFile.inprogress}
				    	</c:if>
				    </display:column>
				    <display:column style="width:30px;background: #d2f5b0;" sortable="false" href="${ctx}/file/viewFile.html" media="html" paramId="id" paramProperty="id" titleKey="button.detail.title">
						        Xem
						    </display:column>
			  	</c:otherwise>
			</c:choose>
		</display:table>
		<div class="msg info">
		<table width="100%">
			<tr>
				<td width="10" style="background-color:#d2f5b0; color:#000000">&nbsp;</td>
				<td><fmt:message key="tasklist.listform.table.footer.notexpire"/></td>
				<td width="10" style="background-color:#FFFF99; color:#000000">&nbsp;</td>
				<td><fmt:message key="tasklist.listform.table.footer.closeExpiring"/></td>
				<td width="10" style="background-color:#fcbdbd; color:#000000">&nbsp;</td>
				<td><fmt:message key="tasklist.listform.table.footer.expire"/></td>
				<td width="20"><img src="${ctx}/images/new.gif" align="left" height="20" width="20"></td>
				<td><fmt:message key="tasklist.listExchange.table.item.new.file"/></td>
			</tr>
		</table></div>
	</div>

	<div id="tab2" class="tab_content"> 
		<s:set var="exchange_name" value="%{getText('exchangemsg.item_name')}" scope="page"></s:set>
		<s:set var="exchanges_name" value="%{getText('exchangemsg.items_name')}" scope="page"></s:set>
		<display:table name="exchangeMsgList" class="table" requestURI="" id="exchangeMsg" pagesize="10" >
			<display:setProperty name="paging.banner.item_name" value="${exchange_name}"/>
			<display:setProperty name="paging.banner.items_name" value="${exchanges_name}"/>
					        <display:column style="width:50px;" sortable="false" href="${ctx}/file/viewFile.html" media="html" paramId="id" paramProperty="file.id" titleKey="button.detail.title">
						        Xem
						    </display:column>
						    <display:column sortable="false" titleKey="tasklist.listExchange.table.header.date" escapeXml="true">
						    	<joda:format value="${exchangeMsg.date}" pattern="dd/MM/YYYY hh:mm" />
						    </display:column>
						    <display:column sortable="false" titleKey="tasklist.listExchange.table.header.sender" escapeXml="true" >
						    	${exchangeMsg.sender.firstName} ${exchangeMsg.sender.lastName}
						    </display:column>
						    <display:column sortable="false" property="sender.department.name" titleKey="user.department" escapeXml="true" ></display:column>
						    <display:column style="width:150px" maxLength="60" sortable="false" titleKey="tasklist.listExchange.table.header.message">
						    	<c:if test="${exchangeMsg.status == false}">
						    		${exchangeMsg.comment}<img src="${ctx}/images/new.gif" align="left" height="20" width="20">
						    	</c:if>
						    	<c:if test="${exchangeMsg.status == true}">
						    		${exchangeMsg.comment}
						    	</c:if>
						    </display:column>
						    <display:column style="width:20px" titleKey="tasklist.listExchange.table.header.tool">
									<img src="${ctx}/images/btn_view.png" id="${exchangeMsg.id}" name="btnShowDialog" onclick="showDialog(this)" align="left" height="20" width="20">
						    </display:column>
		</display:table>
		<div class="msg info">
			<img src="${ctx}/images/new.gif" align="left" height="20" width="20"><fmt:message key="tasklist.listExchange.table.item.new.message"/>
		</div>
	</div>
</div>
